﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="share/layout">

<head>
<title>知识图谱可视化</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.pl-20{
padding-left:20px
}
text{
	cursor:pointer;
	max-width: 25px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
circle{
	cursor:pointer;
}
#graphcontainerdiv{
 background:#fff;
}
.el-color-picker__panel{
left: 812px !important;
}
.wange-toolbar{
            border: 1px solid #ccc;
        }
.wangeditor-form{
    border: 1px solid #ccc;
    height: 350px;
    min-height: 340px
}
.mind-fj-box {
    display: inline-block;
    width: 290px;
    padding: 5px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 8px rgba(206,205,201,.38);
}
.mind-fj-p {
    color: #666;
    line-height: 24px;
    padding: 5px;
    background: rgba(255,255,255,.85);
}
.mind-carousel+.mind-fj-p .el-scrollbar__wrap {
    height: auto;
    max-height: 220px;
    min-height: 0;
}
.carous-img {
    height: 100%;
    background: rgba(0,0,0,.10);
    line-height: 197px;
    text-align: center;
}
.carous-img img {
    max-width: 100%;
    max-height: 100%;
    line-height: 197px;
    vertical-align: middle;
}
.circle_opreate{
	display: none;
}
.node_detail {
	position: absolute;
	width: 100%;
	line-height: 35px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	font-size: 12px;
	padding-bottom: 10px;
	background: rgba(198, 226, 255,0.2);
	display:none;
}
.node_pd{	
	padding:4px;
    font-size: 13px;
    font-family: -webkit-body;
    font-weight: 600;
}
.operatetips{
	position: absolute;
    right: 10px;
    float: right;
    top: 0;
    width: 220px;
    padding: 30px;
    border: 2px #EE7942 solid;
    border-radius: 4px;
}
.jsoncontainer{
	position: absolute;
	right: 30%;
	float: right;
	top: 0;
	width: 60%;
	height: 60%;
	padding: 30px;
	border: 2px #EE7942 solid;
	border-radius: 4px;
	background: #fff;
}
	.cypher_toolbar{
		line-height: 70px;
		height: 85px;
		padding: 0 22px;
		border-bottom: 1px solid #ededed;
	}
</style>
<link href="https://cdn.bootcss.com/jquery-jsonview/1.2.3/jquery.jsonview.min.css" rel="stylesheet">
<link th:href="@{/wangeditor/wangEditor.css}" rel="stylesheet"/>
	<script src="https://cdn.bootcss.com/jquery-jsonview/1.2.3/jquery.jsonview.js"></script>
</head>

<body>
	<div layout:fragment="content">
	<div class="mind-box">
    <!-- 左侧 -->
    <el-scrollbar class="mind-l">
      <div class="ml-m">
        <h2 class="ml-ht">图谱列表</h2>
        <div class="ml-a-box" style="min-height:280px">
          <el-button type="info"style="margin: 2px 0 4px 2px;" plain size="small" @click="createdomain">新建图谱</el-button>
          <a @click="matchdomaingraph(m,$event)" v-for="m in pageModel.nodeList" href="javascript:void(0)">
          	<el-tag closable style="margin:2px" @close="deletedomain(m.id,m.name)">{{m.name}}</el-tag>
          </a>
          <el-button v-if="pageModel.pageIndex<pageModel.totalPage" type="info"style="margin: 2px 0 4px 2px;" plain size="small" @click="getmoredomain">加载更多</el-button>
        </div>
        <div id="follow-us" class="guanzhu" style="padding: 20px;">
		      <h2 class="hometitle">交流</h2>
		      <ul>
		       	<li class="wx"><img src="http://file.miaoleyan.com/nndt/8UQmv0M1CWLxFx45YSuUElouufhePenr"></li>
		      </ul>
		    </div>
      </div>
    </el-scrollbar>
    <!-- 左侧over -->
    <!-- 右侧 -->
    <div class="mind-con">
      <!-- 头部 -->
      <div class="mind-top clearfix">
        <div class="fl">
        <div class="search" v-show="domain!=''">
            <el-button @click="getdomaingraph(0)">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-search"></use>
              </svg>
            </el-button>
            <el-input placeholder="请输入关键词" v-model="nodename" @keyup.enter.native="getdomaingraph"></el-input>
          </div>
          <span v-show="domain!=''">
	          <span class="dibmr">
				<span>显示节点个数：</span>
				<a v-for="(m,index) in pagesizelist" @click="setmatchsize(m,this)" :title="m.size" href="javascript:void(0)" :class="[m.isactive ? 'sd-active' : '', 'sd']" >{{m.size}}</a>
			  </span>
          </span>
        </div>
        <div class="fr">
			<a href="javascript:void(0)" @click="cypherjson" class="svg-a-sm">
				<i class="el-icon-tickets" >显示json</i>
			</a>
			<a href="javascript:void(0)" @click="showCypher" class="svg-a-sm">
				<i class="el-icon-caret-right">执行Cypher</i>
			</a>
          	<a href="javascript:void(0)" @click="updategraph" class="svg-a-sm">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shuaxin"></use>
            </svg>刷新
          </a>
          <a href="javascript:void(0)" @click="requestFullScreen" class="svg-a-sm" >
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-quanp"></use>
            </svg>全屏
          </a>
          <el-dropdown @command="operateCommand">
		  <el-button type="primary">
		    操作<i class="el-icon-arrow-down el-icon--right"></i>
		  </el-button>
		  <el-dropdown-menu slot="dropdown">
			  <el-dropdown-item command="image">导出图片</el-dropdown-item>
			  <el-dropdown-item command="import">导入</el-dropdown-item>
			  <el-dropdown-item command="export">导出</el-dropdown-item>
		  </el-dropdown-menu>
		</el-dropdown>
        </div>
      </div>
		<div class="cypher_toolbar clearfix" v-show="cyphertextshow">
			<div style="width: 80%;float: left"><el-input type="textarea"  :rows="2" placeholder="请输入Cypher" v-model="cyphertext"> </el-input></div>
			<div style="padding: 7px;">
				<el-button type="success" @click="cypherrun" style="margin-left: 15px;" icon="el-icon-caret-right" plain>执行</el-button>
			</div>
		</div>
      <!-- 头部over -->
      <!-- 中部 -->
      <el-scrollbar class="mind-cen" id="graphcontainerdiv">
      	<div id="nodedetail" class="node_detail">
             <h5>详细数据</h5>
             <span class="node_pd" v-for="(m,k) in nodedetail">{{k}}:{{m}}</span>
        </div>

        <div v-show="tipsshow" id="operatetips" class="operatetips">
			<span style="color:red;position:absolute;top:6px;left:10px;cursor:pointer;" @click="btntipsclose">x</span>
			<span style="color: #EE4000; ">至前端小哥哥小姐姐：如果你们只是参考d3.js创建图谱的力导向图，打开源码后找到</span>
			<span style="color: #EE4000; ">/kgmaker/src/main/resources</span>
			<span style="color: #EE4000; ">/templates/kg</span>
			<span style="color: #EE4000; ">/demoforfont-end.html,这是一个静态页</span>
			<div style="color: #EE4000; width: 100%"><a style="color:orange;" href="https://github.com/MiracleTanC/Neo4j">Github源码</a></div>
			<h3>tips</h3>
			<ul>
				<li>1.选中节点或者节点名称，双击修改名称</li>
				<li>2.连线选择之后，再点击其他节点，完成节点间的连线</li>
				<li>3.鼠标滑到连线上，连线变粗，双击修改连线名称，若已有名称，则可根据提示修改</li>
				<li>4.批量添加，没有添加节点文字控制（如有需要可自己定制）</li>
				<li>5.追加意为在该节点下添加下级节点，并添加默认连线</li>
				<li>6.展开意为查询与该节点有直接关系的节点，（如有需要可定制自己的cypher语句）</li>
				<li>7.导入csv,需保证csv编码为utf-8,代码中使用远程导入，可使用服务器importdata(可查看相关博文)</li>
				<li>8.为节点添加富文本或者图片后，在节点上停留2秒可以查看内容</li>
			</ul>
        </div>
		  <el-scrollbar v-show="jsonshow" id="jsoncontainer"  class="jsoncontainer">
			  <pre id="json-renderer"></pre>
		  </el-scrollbar>
        <div id="graphcontainer"  class="graphcontainer"></div>
      </el-scrollbar>
      <!-- 中部over -->
        <div class="svg-set-box"></div>
      <!-- 底部 -->
		<el-dialog title="csv导入图谱" :visible.sync="dialogFormVisible" width="30%">
			  <el-form >
				  <div><span>注意字符集为utf-8无bom格式，三元组结构：节点-节点-关系</span></div>
			    <el-form-item label="图谱领域" label-width="120px">
			      <el-autocomplete style="width:100%"
				      v-model="uploadparam.domain" placeholder="请输入内容"><!--:fetch-suggestions="querySearch"-->
				  </el-autocomplete>
			    </el-form-item>
			    <el-form-item label="选择文件" label-width="120px">
				      <el-upload
					  class=""
					  :headers="headers"
					  ref="upload"
					  :action="uploadurl"
					  accept=".csv,.xls,.xlsx"
					  :show-file-list="true"
					  :data="uploadparam"
					  :on-success="csvsuccess"
					  :auto-upload="false">
					  <el-button  slot="trigger" class="btn-bo" style="padding: 12px 24px;margin-bottom: 0px;" >
		                <svg class="icon" aria-hidden="true">
		                  <use xlink:href="#icon-daoru"></use>
		                </svg>
		              	  选择文件
		              </el-button>
					</el-upload>
			    </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="submitUpload">确 定</el-button>
			  </div>
			</el-dialog>
		<el-dialog title="导出图谱csv" :visible.sync="exportFormVisible" width="30%">
			  <el-form >
			    <el-form-item label="图谱领域" label-width="120px">
			      <el-autocomplete style="width:100%"
				      v-model="uploadparam.domain" placeholder="请输入内容"><!--:fetch-suggestions="querySearch"-->
				  </el-autocomplete>
			    </el-form-item>
			    <el-button type="primary" @click="exportcsv">确 定</el-button>
				  </el-form >
			</el-dialog>
		<el-dialog id="editform" title="属性编辑" :visible.sync="isedit" width="30%">
			<el-tabs type="card" tab-position="top" v-model="propactiveName" @tab-click="prophandleClick" style="margin: 10px">
			<el-tab-pane label="属性编辑" name="propedit">
			  <el-form :model="graphEntity">
			    <el-form-item label="节点名称"  label-width="120px">
			      <el-input v-model="graphEntity.name" style="width:324px"></el-input>
			    </el-form-item>
			    <el-form-item label="选择颜色" label-width="120px">
			      <el-color-picker id="colorpicker" 
					  v-model="graphEntity.color" :predefine="predefineColors">
					</el-color-picker>
			    </el-form-item>
			     <el-form-item label="节点半径" label-width="120px">
			      <el-slider v-model="graphEntity.r" style="width:324px"></el-slider>
			    </el-form-item>
			  </el-form>
			  </el-tab-pane>
			  <el-tab-pane label="添加图片" name="propimage">
			  		<el-form >
				    <el-form-item label="本地上传"  label-width="120px">
				     	  <el-upload class="" :headers="headers"
				     	  			 name="file"
		                             ref="upload"
		                             :action="uploadimageurl"
		                             accept=".jpg,.png"
		                             multiple
		                             :show-file-list="false"
		                             :data="uploadimageparam"
		                             :on-success="uploadsuccess"
		                             :auto-upload="true">
		                       <el-button slot="trigger" size="small" type="primary">选择</el-button>
		                  </el-upload>
				    </el-form-item>
				    <el-form-item label="网络地址" label-width="120px">
				     <el-input v-model="netimageurl" style="width: 60%"></el-input>
		              <a href="javascript:void(0)" @click="addnetimage" class="cg">
		                  <svg class="icon" aria-hidden="true">
		                      <use xlink:href="#icon-add-s"></use>
		                  </svg>
		              </a>
				    </el-form-item>
				     <el-form-item label="已选图片" label-width="120px">
					     <ul class="el-upload-list el-upload-list--picture-card">
			                    <li v-for="item in nodeimagelist" class="el-upload-list__item is-success">
			                        <img :src="imageurlformat(item)" alt="" class="el-upload-list__item-thumbnail">
			                        <label class="el-upload-list__item-status-label">
			                            <i class="el-icon-upload-success el-icon-check"></i>
			                        </label>
			                        <i class="el-icon-close" @click="imagehandleRemove(item)"></i>
			                        <span class="el-upload-list__item-actions">
										<span class="el-upload-list__item-preview">
										     <i class="el-icon-zoom-in" @click="handlePictureCardPreview(item)"></i>
										</span>
				                        <span class="el-upload-list__item-delete">
				                            <i class="el-icon-delete" @click="imagehandleRemove(item)"></i>
				                        </span>
									</span>
			                    </li>
			                </ul>
				    </el-form-item>
			  </el-form>
	          </el-tab-pane>
			  <el-tab-pane label="添加描述" name="richtextedit">
	              <div ref="eidtorToolbar" id="eidtorToolbar" class="wange-toolbar"></div>
	              <div ref="eidtorContent" id="eidtorContent" class="wangeditor-form"></div>
	          </el-tab-pane>
			  </el-tabs>
			  <div slot="footer" class="dialog-footer">
			    <el-button v-show="propactiveName=='propimage'" type="primary" @click="savenodeimage" class="btn-line cur">保存</el-button>
			    <el-button v-show="propactiveName=='richtextedit'" @click="savenodecontent" type="primary" class="btn-line cur">保存</el-button>
			    <el-button v-show="propactiveName=='propedit'&&graphEntity.uuid!=0" type="primary" @click="createnode">更新</el-button>
	          	<el-button v-show="propactiveName=='propedit'&&graphEntity.uuid==0" type="primary" @click="createnode">创建</el-button>
	    		<el-button @click="resetsubmit">取消</el-button>
			  </div>
		</el-dialog>
		<el-dialog id="batchcreateform" :title="operatenameformat(operatetype)":visible.sync="isbatchcreate" width="30%">
		<div v-show="operatetype==1" class="mb-l">添加同级</div>
        <div v-show="operatetype==2" class="mb-l">添加下级</div>
        <div v-show="operatetype==3" class="mb-l">批量添加</div>
        <div v-show="operatetype==4" class="mb-l">段落识别</div>
        <div class="mb-r">
	        <div v-show="operatetype!=2" class="mb-m">
	            <div class="mb-label">源节点名称</div>
		            <div class="mb-con">
		              	<el-input v-model="batchcreate.sourcenodename"></el-input>
		              	<span v-show="operatetype==3" class="mb-label">（只能添加一个）</span>
		            	<span v-show="operatetype==1" class="mb-label">（多个以英文逗号隔开）</span>
		            </div>
		           <div class="mb-label" v-show="operatetype!==1">关系</div>
		           <div class="mb-con" v-show="operatetype!==1">
		              	<el-input v-model="batchcreate.relation"></el-input>
		              	<div class="mb-label">（只能添加一个）</div>
		            </div> 
	          </div>
	          <div v-show="operatetype!=1" class="mb-m">
	            <div class="mb-label">子节点名称</div>
	            <div class="mb-con">
	              <el-input v-model="batchcreate.targetnodenames"></el-input>
	              <span class="mb-label " v-show="operatetype==3">（多个以英文逗号隔开,可不填）</span>
	              <span class="mb-label " v-show="operatetype==2">（多个以英文逗号隔开）</span>
	            </div>
	          </div>
	       	  <div class="mb-m tc">
	          	<el-button v-show="operatetype==1" type="primary" @click="batchcreatesamenode">确定</el-button>
	          	<el-button v-show="operatetype==2" type="primary" @click="batchcreatechildnode">确定</el-button>
	          	<el-button v-show="operatetype==3" type="primary" @click="batchcreatenode">确定</el-button>
	    		<el-button @click="resetsubmit">取消</el-button>
	          </div>
        </div>
		</el-dialog>
      <!-- 底部over -->
    </div>
    <!-- 右侧over -->
    <!-- 空白处右键 -->
    <ul class="el-dropdown-menu el-popper blankmenubar" id="blank_menubar" style="display: none;">
    	<li  class="el-dropdown-menu__item" @click="btnaddsingle">
	    	<svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiedian"></use>
            </svg>
			<span class="pl-15">添加节点</span>
        </li> 
	    <li  class="el-dropdown-menu__item" @click="btnquickaddnode"> 
	    	<svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-add-rd"></use>
            </svg>
			<span class="pl-15">快速添加</span>
        </li> 
    </ul>
    <!-- 连线按钮组 -->
    <ul class="el-dropdown-menu el-popper linkmenubar" id="link_menubar" style="display: none;">
    	<li  class="el-dropdown-menu__item" @click="updatelinkName"> 
	    	<svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-editor"></use>
            </svg>
			<span class="pl-15">编辑</span>
        </li> 
	    <li  class="el-dropdown-menu__item" @click="deletelink"> 
	    	<svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shanchu"></use>
            </svg>
			<span class="pl-15">删除</span>
        </li> 
    </ul>
  	<!-- 富文本展示 -->
    <div id="richContainer" style="display: none;width: 400px">
            <div class="mind-fj-box" v-show="showImageList.length>0 ||editorcontent!=''">
                <div class="mind-carousel" v-show="showImageList.length>0">
                    <el-carousel height="197px" :interval="2000" arrow="always">
                        <el-carousel-item v-for="item in showImageList" :key="item.ID">
                            <div class="carous-img">
                                <img  :src="item.FileName" alt="">
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <el-scrollbar v-show="editorcontent!=''" class="mind-fj-p">
                    <p v-html="editorcontent" ></p>
                </el-scrollbar>
            </div>
        </div>
         
  </div>
	</div>
</body>

<div layout:fragment="jscontent">
	<script src="https://cdn.bootcss.com/lodash.js/3.5.0/lodash.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js" th:src="@{/js/d3.v4.min.js}"></script>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" th:src="@{/js/html2canvas.min.js}"></script>

     <script  type="text/javascript" th:src="@{/wangeditor/wangEditor.js}"></script>
	<script th:inline="javascript" type="text/javascript">
	var initdomain = function () {
        var domain = [[${domain}]];
        var domainid = [[${domainid}]];
        this.domain = domain;
        this.domainid = domainid;
    }
	</script>
	<script th:inline="javascript" type="text/javascript" th:src="@{/js/kgbuilder.js}"></script> 
</div>
</html>